<template>
  <div class="physical-exercise-table">
    <div class="content-wrapper">
      <div v-if="loading" class="loading-overlay">
        <i class="el-icon-loading"></i>
        <p>正在加载数据...</p>
      </div>

      <!-- 数据表格 -->
      <div class="data-table-container">
        <el-table
          v-loading="loading"
          :data="sportData"
          style="width: 100%"
          :header-cell-style="{
            fontSize: '16px',
            backgroundColor: '#0f1325',
            color: '#68d8fe',
            borderColor: '#68d8fe'
          }"
          :cell-style="{ borderColor: '#68d8fe' }"
          :row-class-name="tableRowClassName"
          border
          class="custom-table"
        >
          <el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>
          <el-table-column prop="gender" label="性别" width="80" align="center"></el-table-column>
          <el-table-column prop="classes" label="班级" width="80" align="center"></el-table-column>
          <el-table-column prop="groupName" label="组别" width="80" align="center"></el-table-column>
          <el-table-column prop="testNode" label="体测节点名称" width="120" align="center"></el-table-column>
          <el-table-column prop="testDate" label="体测日期" width="120" align="center">
            <template slot-scope="scope">
              {{ formatDate(scope.row.testDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="threeThousand" label="3000米" width="100" align="center">
            <template slot-scope="scope">
              <span :class="{
                'pass-status': scope.row.threeThousand === '优秀',
                'normal-status': scope.row.threeThousand === '良好',
                'warning-status': scope.row.threeThousand === '及格',
                'fail-status': scope.row.threeThousand === '不及格'
              }">
                {{ scope.row.threeThousand }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="horizontalBar" label="单杠" width="100" align="center">
            <template slot-scope="scope">
              <span :class="{
                'pass-status': scope.row.horizontalBar === '优秀',
                'normal-status': scope.row.horizontalBar === '良好',
                'warning-status': scope.row.horizontalBar === '及格',
                'fail-status': scope.row.horizontalBar === '不及格'
              }">
                {{ scope.row.horizontalBar }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="crunch" label="卷腹" width="100" align="center">
            <template slot-scope="scope">
              <span :class="{
                'pass-status': scope.row.crunch === '优秀',
                'normal-status': scope.row.crunch === '良好',
                'warning-status': scope.row.crunch === '及格',
                'fail-status': scope.row.crunch === '不及格'
              }">
                {{ scope.row.crunch }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="serpentineRun" label="蛇形跑" width="100" align="center">
            <template slot-scope="scope">
              <span :class="{
                'pass-status': scope.row.serpentineRun === '优秀',
                'normal-status': scope.row.serpentineRun === '良好',
                'warning-status': scope.row.serpentineRun === '及格',
                'fail-status': scope.row.serpentineRun === '不及格'
              }">
                {{ scope.row.serpentineRun }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="parallelBars" label="双杠" width="100" align="center">
            <template slot-scope="scope">
              <span :class="{
                'pass-status': scope.row.parallelBars === '优秀',
                'normal-status': scope.row.parallelBars === '良好',
                'warning-status': scope.row.parallelBars === '及格',
                'fail-status': scope.row.parallelBars === '不及格'
              }">
                {{ scope.row.parallelBars }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="总分数" min-width="100" align="center"></el-table-column>
        </el-table>
      </div>
      <!-- 分页按钮应放在表格外部 -->
      <div class="pagination">
        <el-button
          :disabled="currentPage === 1"
          @click="changePage(currentPage - 1)"
          class="page-btn"
          type="primary"
          size="small"
        >
          <i class="el-icon-arrow-left"></i>
        </el-button>
        <span class="page-info">
          第 <b>{{ currentPage }}</b> / <b>{{ totalPages }}</b> 页
        </span>
        <el-button
          :disabled="currentPage === totalPages"
          @click="changePage(currentPage + 1)"
          class="page-btn"
          type="primary"
          size="small"
        >
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PhysicalExerciseTable',
  data() {
    return {
      loading: false,
      sportData: [],
      currentPage: 1,
      itemsPerPage: 16,
      total: 256 // 16页 * 16条/页 = 256条
    }
  },
  computed: {
    filteredData() {
      if (!this.sportData || !this.sportData.length) return [];
      return [...this.sportData];
    },
    pagedData() {
      return this.filteredData;
    },
    totalPages() {
      return 16; // 固定16页
    }
  },
  methods: {
    // 设置表格行样式
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
    },
    // 获取体测数据
    async fetchSportData() {
      this.loading = true;
      try {
        const res = await this.$overviewapi.getSportstest({
          pageNum: this.currentPage,
          pageSize: this.itemsPerPage
        });
        if (res.code === '200') {
          if (Array.isArray(res.data)) {
            this.sportData = res.data;
          } else if (res.data && Array.isArray(res.data.list)) {
            this.sportData = res.data.list;
          } else {
            this.sportData = [];
          }
        } else {
          this.$message.error(res.msg || '获取数据失败');
          this.sportData = [];
        }
      } catch (error) {
        console.error('加载体测数据失败:', error);
        this.$message.error('加载体测数据失败，请检查API连接');
        this.sportData = [];
      } finally {
        this.loading = false;
      }
    },
    // 格式化日期显示
    formatDate(dateStr) {
      if (!dateStr) return "";

      // 处理数字格式的日期 (如 20250426)
      if (/^\d{8}$/.test(dateStr)) {
        const year = dateStr.substring(0, 4);
        const month = dateStr.substring(4, 6);
        const day = dateStr.substring(6, 8);
        return `${year}-${month}-${day}`;
      }

      // 尝试常规日期解析
      const date = new Date(dateStr);
      if (!isNaN(date.getTime())) {
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
      }

      return dateStr;
    },
    // 修改页码
    changePage(page) {
      if (page < 1 || page > 16) return; // 限制在1-16页之间
      this.currentPage = page;
      this.fetchSportData();
    }
  },
  created() {
    this.fetchSportData();
  }
}
</script>

<style lang="scss" scoped>
.physical-exercise-table {
  height: 100%;
  width: 100%;

  .content-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;

    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(29, 33, 39, 0.8);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 10;

      p {
        margin-top: 10px;
        color: #fff;
      }
    }

    .data-table-container {
      flex: 1;
      overflow: hidden;
      position: relative;
      height: calc(100vh - 200px);
      max-height: calc(100vh - 200px);
      margin-bottom: 24px;

      .custom-table {
        background-color: transparent;
        color: #d3d6dd;
        height: 100%;

        :deep(.el-table__header-wrapper th) {
          background-color: #0f1325;
          color: #68d8fe;
          font-weight: bold;
          position: sticky;
          top: 0;
          z-index: 10;
        }

        :deep(.el-table__body-wrapper) {
          overflow-y: auto;
          max-height: calc(100vh - 300px);
          scrollbar-width: thin;
        }

        :deep(.el-table__body-wrapper::-webkit-scrollbar) {
          width: 6px;
          height: 6px;
        }

        :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
          background: rgba(104, 216, 254, 0.5);
          border-radius: 3px;
        }

        :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
          background: rgba(0, 0, 0, 0.1);
          border-radius: 3px;
        }

        :deep(.el-table__body-wrapper tr) {
          background-color: transparent;

          &.even-row td {
            background-color: #0f1325;
          }

          &.odd-row td {
            background-color: #171c33;
          }

          &:hover > td {
            background-color: rgba(45, 50, 62, 0.7) !important;
          }
        }

        :deep(.el-table__row td) {
          color: #d3d6dd;
        }

        .pass-status {
          color: #19be6b;
          font-weight: bold;
        }

        .normal-status {
          color: #2d8cf0;
        }

        .warning-status {
          color: #ff9900;
        }

        .fail-status {
          color: #ed3f14;
        }

        .not-participated {
          color: #909399;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      gap: 8px;
      background: transparent;
      border-radius: 6px;
      padding: 2px 8px;

      .page-btn {
        background: linear-gradient(90deg, #1e2746 0%, #223a5e 100%);
        border: none;
        color: #68d8fe;
        font-size: 14px;
        border-radius: 4px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        cursor: pointer;
        padding: 0;

        &:hover:not(:disabled) {
          background: linear-gradient(90deg, #68d8fe 0%, #1e2746 100%);
          color: #fff;
        }

        &:disabled {
          background: #222b44;
          color: #888;
          cursor: not-allowed;
          opacity: 0.5;
        }
      }

      .page-info {
        color: #d3d6dd;
        font-size: 13px;
        font-weight: 500;
        margin: 0 10px;

        b {
          color: #68d8fe;
          font-size: 14px;
          font-weight: bold;
          margin: 0 2px;
        }
      }
    }
  }
}
</style>
